<template>
	<view class="comment-info">
		<view class="title">
			<view class="all-comment">全部评论</view>
			<div class="sort-way">默认</div>
		</view>
		<view class="comment-list">
			<view v-for="(item,index) in commentList" :key="index" class="item">
				<image class="avatar" :src="item.avatar"></image>
				<view class="content-info">
					<text class="user-name">{{item.username}}</text>
					<text class="content">{{item.content}}</text>
					<text class="comment-time">{{item.comment_time}}</text>
				</view>
				<view class="like-comment"></view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				commentList: [
					{
						id: 1,
						content: "我真的笑了",
						comment_time: "04-05",
						avatar: "https://p1.itc.cn/q_70/images03/20230405/6166f74f59a0415b9bd2e233ef4f8fff.jpeg",
						username: "Gigibang",
						comment_id: '2'
					},
					{
						id: 7,
						content: "真的挺不错的",
						comment_time: "04-05",
						avatar: "https://picx.zhimg.com/v2-3e6ebc244cbc1b4271c51b1e44b138db_1440w.jpg?source=172ae18b",
						username: "请问你是谁",
						comment_id: '2'
					},
					{
						id: 5,
						content: "这狗真可爱",
						comment_time: "04-05",
						avatar: "https://pic1.zhimg.com/80/v2-1fd7f5463e17e2cc615ba093a1f20548_720w.webp",
						username: "我不叫吴彦祖",
						comment_id: '2'
					},
					{
						id: 2,
						content: "怎么样才能拥有这么可爱的宠物",
						comment_time: "04-05",
						avatar: "https://pic3.zhimg.com/80/v2-bae4b6dc4c6b10f630913f150567c5ee_720w.webp",
						username: "请你放尊重点",
						comment_id: '2'
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
	.title {
		display: flex;
		justify-content: space-between;
		margin-top: 20px;
		padding-top: 30px;
		border-top: 1px solid #eee;
	}
	
	.title .comment-btn {
		font-size: 12px;
	}
	
	.title .sort-way {
		position: relative;
		color: #c4c4c4;
		font-size: 12px;
	}
	
	.title .sort-way::before {
		position: absolute;
		content: '';
		left: -45rpx;
		top: -5rpx;
		width: 40rpx;
		height: 40rpx;
		background-image: url('@/static/images/common/sort.png');
		background-size: contain;
	}
	
	.comment-list {
		margin-top: 20px;
	}
	
	.comment-list .item  {
		display: flex;
		width: 100%;
		margin-bottom: 15px;
	}
	
	
	.comment-list .item .avatar {
		width: 40px;
		height: 40px;
		border-radius: 50%;
		margin-top: 0rpx;
	}
	
	.comment-list .item .content-info {
		display: flex;
		flex-direction: column;
		margin-left: 10px;
	}
	
	.comment-list .item .content-info .user-name {
		/* color: #c4c4c4; */
		font-size: 14px;
	}
	
	.comment-list .item .content-info .content {
		margin: 5px 0;
	}
	
	.comment-list .item .content-info .comment-time {
		font-size: 12px;
		color: #c4c4c4;
	}
	
	.comment-list .item .like-comment {
		position: relative;
		width: 50rpx;
		height: 50rpx;
		margin-left: auto;
	}
	
	.comment-list .item .like-comment::before {
		position: absolute;
		content: '';
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-image: url('@/static/images/tabicon/unlikegray.png');
		background-size: contain;
	}
	
	
	
	
</style>